<!DOCTYPE html>  
<html>  
<head>  
<title>cs</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>  
<body>
<div>
	<button onclick="btn_small_rect()">small</button>
	<button onclick="btn_regular_rect()">regular</button>
	<button onclick="btn_big_rect()">big</button>
	<button onclick="btn_hidden_rect()">hidden</button>
	<button onclick="btn_alpha_rect()">alpha</button>
	<button onclick="btn_rotate_rect()">rotate</button>
	<button onclick="btn_gradient_rect()">gradient</button>
	<button onclick="btn_draw_image()">image</button>
	<button onclick="btn_clip_image()">clip</button>
	<button onclick="btn_shadow_image()">shadow</button>
</div>

<canvas id="mycanvas" width="800" height="600" style="border: 1px solid;"></canvas>
<div id="result">
	
</div>
<br>

<script language="javascript" type="text/javascript">
	var img=new Image();
	img.src ="cats.jpg";
	
	var mcanvas= document.getElementById("mycanvas");
	var ctx=mcanvas.getContext('2d');
	
	var hcanvas= document.createElement("canvas");
		hcanvas.width=800;hcanvas.height=600;
	var hctx=hcanvas.getContext('2d');
	
	var show=document.getElementById("result");
	
	

//////////////////////////////////
function fill_small_rect(context,posx,posy,whole,real){
	for(var i=posx;i<400+posx;i+=whole){
		for(var j=posy;j<300+posy;j+=whole){
			context.fillRect(i,j,real,real);
		}
	}
}	
function fill_regular_rect(context,posx,posy,length){
	for(var j=0;j<300;j++){
		context.fillRect(posx+j,posy+j,length,length);
	}
}
function fill_big_rect(context,posx,posy,length){
	for(var j=0;j<300;j++){
		context.fillRect(posx+(400-length)*j/300,posy+(300-length)*j/300,length,length);
	}
}
////////////////////////////////////
function rotate_rect(context,posx,posy,theta){
	ctx.save();
	ctx.translate(200+posx,150+posy);
	ctx.rotate(theta);
	for(var i=0;i<400;i+=10){
		for(var j=0;j<300;j+=10){
			ctx.fillRect(i-200,j-150,8,8);
		}
	}
	ctx.restore();
}

function fill_alpha_rect(context,posx,posy,alpha){
	ctx.save();
	var style="rgba(255,80,80,";
	style+=alpha;
	style+=")";
	ctx.fillStyle=style;
	var length=100;
	for(var j=0;j<300;j++){
		context.fillRect(posx+j,posy+j,length,length);
	}
	ctx.restore();
}
function gradient_linear_rect(){
	ctx.save();
	var gradient = ctx.createLinearGradient(50,50,350,550);
	gradient.addColorStop(0,"rgb(200,100,100)");
	gradient.addColorStop(0.33,"rgb(100,200,100)");
	gradient.addColorStop(0.66,"rgb(100,100,200)");
	gradient.addColorStop(1,"rgb(255,255,255)");
	ctx.fillStyle=gradient;
	ctx.fillRect(0,0,400,600);
	ctx.restore();
} 
function gradient_radial_rect(){
	/*
	这里写点关于chrome和IE、FF处理的不同
	内含：同
	其他：chrome碰到半径相同的会不做处理
	其他浏览器只处理两个圆公切线内部的部分，而chrome处理整个canvas;
	*/
	ctx.save();
	var gradient = ctx.createRadialGradient(600,400,50,600,300,250);
	gradient.addColorStop(0,'rgba(0,255,255,0.9)');
	gradient.addColorStop(1,'rgba(255,255,0,0.8)');
	ctx.strokeStyle="#99cc33";
	ctx.fillStyle= gradient;//'rgba(50,0,0,0.7)';
	ctx.fillRect(400,0,400,600);
	ctx.restore();
} 

function rect_image(context,posx,posy,whole,real){
	for(var i=posx;i<400+posx;i+=whole){
		for(var j=posy;j<300+posy;j+=whole){
			context.drawImage(img,i,j,real,real,i,j,real,real);
		}
	}
}
function clip_circle(){
	//ctx.save();
	ctx.beginPath();
	ctx.arc(600,450,200,0,Math.PI*2,true);
	ctx.clip();
}
function clip_rect(){
	//ctx.save();
	ctx.beginPath();
	ctx.rect(425,25,350,250);
	ctx.clip();
}
function clip_star(posx,posy,r){	
	ctx.save();
	ctx.translate(posx,posy);
	ctx.beginPath();
	ctx.moveTo(r,0);
	for (var i=0;i<10;i++){
	ctx.rotate(Math.PI/5);
	if(i%2 == 0) {
	ctx.lineTo((r/0.525731)*0.300811,0);
	} else {
	ctx.lineTo(r,0);
	}
}
	ctx.closePath();
	ctx.restore();
	ctx.clip();
}	
	
function draw_circle(context,posx,posy,r){
	context.beginPath();
	context.arc(posx,posy,r,0,Math.PI*2,true);
	context.fill();
}
////////////////////////

function calculate(times,func,argument){
	var old;
	var now;
	var result=new Array();
	for(var x=0;x<times;x++){
		old= new Date();
		func.apply(null,argument);
		now= new Date();
		result.push(now-old);
	}
	var sum=0;
	for(var i=0;i<result.length;i++){
		sum+=result[i];
	}
	var average=sum/result.length;
	sum=0;
	for(var i=0;i<result.length;i++){
		result[i]=(result[i]-average)*(result[i]-average);
		sum+=result[i];
	}
	sum=sum/result.length;
	sum=parseInt(sum*100)/100;
	return ("average:"+average+"ms  Variance:"+sum+"<br>");
}
function btn_small_rect(){
	ctx.clearRect(0,0,800,600);
	var result=("1200,2*2:");
	var argu=new Array(ctx,0,0,10,2);
	result+=calculate(10,fill_small_rect,argu);
	
	result+=("1200,4*4:");
	argu=new Array(ctx,400,0,10,4);
	result+=calculate(10,fill_small_rect,argu);
	
	result+=("1200,6*6:");
	argu=new Array(ctx,0,300,10,6);
	result+=calculate(10,fill_small_rect,argu);
	
	result+=("1200,8*8:");
	argu=new Array(ctx,400,300,10,8);
	result+=calculate(10,fill_small_rect,argu);
	
	show.innerHTML=result;
}
function btn_regular_rect(){
	ctx.clearRect(0,0,800,600);
	var result="";
	var argu;
	result+=("300,50*50:");
	argu=new Array(ctx,0,0,50);
	result+=calculate(10,fill_regular_rect,argu);
	
	result+=("300,100*100:");
	argu=new Array(ctx,400,0,100);
	result+=calculate(10,fill_regular_rect,argu);
	
	result+=("300,150*150:");
	argu=new Array(ctx,0,200,150);
	result+=calculate(10,fill_regular_rect,argu);
	
	result+=("300,200*200:");
	argu=new Array(ctx,400,200,200);
	result+=calculate(10,fill_regular_rect,argu);
	
	show.innerHTML=result;
}

function btn_big_rect(){
	ctx.clearRect(0,0,800,600);
	var result="";
	var argu;
	result+=("300,50*50:");
	argu=new Array(ctx,0,0,50);
	result+=calculate(10,fill_big_rect,argu);
	
	result+=("300,100*100:");
	argu=new Array(ctx,400,0,100);
	result+=calculate(10,fill_big_rect,argu);
	
	result+=("300,150*150:");
	argu=new Array(ctx,0,300,150);
	result+=calculate(10,fill_big_rect,argu);
	
	result+=("300,200*200:");
	argu=new Array(ctx,400,300,200);
	result+=calculate(10,fill_big_rect,argu);
	
	show.innerHTML=result;
}
function btn_hidden_rect(){
	hctx.clearRect(0,0,800,600);
	var result="";
	var argu;
	result+=("1200,2*2:");
	argu=new Array(hctx,0,0,10,2);
	result+=calculate(10,fill_small_rect,argu);
	
	result+=("1200,4*4:");
	argu=new Array(hctx,400,0,10,4);
	result+=calculate(10,fill_small_rect,argu);
	
	result+=("1200,6*6:");
	argu=new Array(hctx,0,300,10,6);
	result+=calculate(10,fill_small_rect,argu);
	
	result+=("1200,8*8:");
	argu=new Array(hctx,400,300,10,8);
	result+=calculate(10,fill_small_rect,argu);
	
	result+=("300,50*50:");
	argu=new Array(hctx,0,0,50);
	result+=calculate(10,fill_big_rect,argu);
	
	result+=("300,100*100:");
	argu=new Array(hctx,400,0,100);
	result+=calculate(10,fill_big_rect,argu);
	
	result+=("300,150*150:");
	argu=new Array(hctx,0,300,150);
	result+=calculate(10,fill_big_rect,argu);
	
	result+=("300,200*200:");
	argu=new Array(hctx,400,300,200);
	result+=calculate(10,fill_big_rect,argu);
	
	show.innerHTML=result;
}
function btn_alpha_rect(){
	ctx.clearRect(0,0,800,600);
	var result="";
	var argu;
	
	result+=("300,alpha  0.05,100*100:");
	argu=new Array(ctx,0,0,0.05);
	result+=calculate(10,fill_alpha_rect,argu);
	
	result+=("300,alpha  0.1,100*100:");
	argu=new Array(ctx,400,0,0.1);
	result+=calculate(10,fill_alpha_rect,argu);
	
	result+=("300,alpha  0.5,100*100:");
	argu=new Array(ctx,0,200,0.5);
	result+=calculate(10,fill_alpha_rect,argu);
	
	result+=("300,alpha  1,100*100:");
	argu=new Array(ctx,400,200,1);
	result+=calculate(10,fill_alpha_rect,argu);	
	
	show.innerHTML=result;
}
function btn_rotate_rect(){
	ctx.clearRect(0,0,800,600);
	var result="";
	var argu;
	
	var result=("1200,rotate 0,8*8:");
	argu=new Array(ctx,0,0,0);
	result+=calculate(10,rotate_rect,argu);
	
	
	result+=("1200,rotate PI/4,8*8:");
	argu=new Array(ctx,400,0,Math.PI/4);
	result+=calculate(10,rotate_rect,argu);
	
	result+=("1200,rotate PI*2/7,8*8:");
	argu=new Array(ctx,0,300,Math.PI*2/7);
	result+=calculate(10,rotate_rect,argu);
	
	result+=("1200,rotate PI/2,8*8:");
	argu=new Array(ctx,400,300,Math.PI/2);
	result+=calculate(10,rotate_rect,argu);
	
	show.innerHTML=result;
}
function btn_gradient_rect(){
	ctx.clearRect(0,0,800,600);
	var result=("linear gradient,700*700:");
	result+=calculate(100,gradient_linear_rect);
	
	result+=("radial gradient,700*700:");
	result+=calculate(10,gradient_radial_rect);
	show.innerHTML=result;
}
function btn_draw_image(){
	ctx.clearRect(0,0,800,600);
	var result=""
	var argu;
	
	result+=("9*9:");
	argu=new Array(ctx,0,0,10,9);
	result+=calculate(10,rect_image,argu);
	
	result+=("29*29:");
	argu=new Array(ctx,400,0,30,29);
	result+=calculate(10,rect_image,argu);
	
	result+=("49*49:");
	argu=new Array(ctx,0,300,50,49);
	result+=calculate(10,rect_image,argu);
	
	result+=("99*99:");
	argu=new Array(ctx,400,300,100,99);
	result+=calculate(10,rect_image,argu);
	
	show.innerHTML=result;	
}
function btn_clip_image(){
	ctx.clearRect(0,0,800,600);
	
	var argu;
	var result=("no clip:");
	argu=new Array(ctx,0,0,50,49);
	result+=calculate(100,rect_image,argu);
	
	ctx.save();
	clip_rect();
	result+=("rect clip:");
	argu=new Array(ctx,400,0,50,49);
	result+=calculate(10,rect_image,argu);
	ctx.restore();
	
	ctx.save();
	clip_star(180,450,200);
	result+=("star clip:");
	argu=new Array(ctx,0,300,50,49);
	result+=calculate(10,rect_image,argu);
	ctx.restore();
	
	ctx.save();
	clip_circle();
	result+=("circle clip:");
	argu=new Array(ctx,400,300,50,49);
	result+=calculate(10,rect_image,argu);
	show.innerHTML=result;
	ctx.restore();
}
function btn_shadow_image(){
	ctx.clearRect(0,0,800,600);
	ctx.save();	
	var result=("no shadow:");
	var argu;
	argu=new Array(ctx,140,140,140);
	result+=calculate(10,draw_circle,argu);
	
	
	ctx.shadowOffsetX = 5;
	ctx.shadowOffsetY=5;
	ctx.shadowColor="rgb(100,100,100)";
	
	result+=("no blur:");
	argu=new Array(ctx,460,140,140);
	result+=calculate(10,draw_circle,argu);
	
	ctx.shadowBlur=3;
	result+=("blur=3:");
	argu=new Array(ctx,140,460,140);
	result+=calculate(10,draw_circle,argu);
	
	ctx.shadowBlur=10;
	result+=("blur=10:");
	argu=new Array(ctx,460,460,140);
	result+=calculate(10,draw_circle,argu);
	show.innerHTML=result;
	ctx.restore();
}
</script>  
</body>  
</html>  